<!--楼宇设备-->
<template>
    <!--头部-->
    <basic-layout title="服务设备详情" :showAddBtn="false">
    <!--数据-->
    <van-form @submit="saveHandle" ref="form" class="dataStyle">
      <van-cell-group>
        <div class="cellDataStyle">
          <div class="cellTextStyle">
            <van-field
              :readonly="true"
              :disabled="true"
              v-model="dataInfo.SWIDBM"
              label="实物ID"
              placeholder=""
              :border="false"
              />
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="cellTextStyle">
            <van-field
              required
              v-model="dataInfo.PINM"
              label="设备名称"
              placeholder="请输入设备名称"
              :border="false"

              :rules="rules.PINM"/>
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="cellTextStyle">
            <van-field
              required
              v-model="dataInfo.XINGH"
              label="设备型号"
              placeholder="请输入设备型号"
              :border="false"

              :rules="rules.XINGH"/>
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="cellTextStyle">
            <van-field
              readonly
              required
              @click="showDialogHandle(99)"
              v-model="dataInfo.UNIT"
              label="单位"
              placeholder="请选择单位"
              :border="false"
              is-link

              :rules="rules.UNIT"/>
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="cellTextStyle">
            <van-field
              v-model="dataInfo.DANJ"
              label="单价(元)"
              placeholder="请输入单价(元)"
              :border="false"

              :rules="rules.DANJ"/>
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="cellTextStyle">
            <van-field
              readonly
              required
              @click="showDialogHandle(1)"
              v-model="dataInfo.SBDL"
              label="设备大类"
              placeholder="请选择设备大类"
              :border="false"

              is-link
              :rules="rules.SBDL"/>
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="cellTextStyle">
            <van-field
              @click="showDialogHandle(2)"
              readonly
              required
              v-model="dataInfo.SBXL"
              label="设备小类"
              placeholder="请选择设备小类"

              is-link
              :rules="rules.SBXL"/>
          </div>
        </div>

        <div class="van-hairline--top vanHairlineTop"></div>

        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            label="楼宇信息"
            placeholder=""
            v-model="dataInfo.FANGCNAME"/>
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            label="楼层信息"
            placeholder=""
            v-model="dataInfo.LOUCNAME"/>
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            label="房间信息"
            placeholder=""
            v-model="dataInfo.FANGJNAME"/>
        </div>

        <div class="van-hairline--top vanHairlineTop"></div>


        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            v-model="dataInfo.GYSMC"
            label="供应商"
            placeholder=""
            />
        </div>

        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            v-model="dataInfo.SHENCRQ"
            label="生产日期"
            placeholder=""
            />
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            v-model="dataInfo.RUKRQ"
            label="入库日期"
            placeholder=""
            />
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            required
            v-model="dataInfo.SHIYQX"
            label="使用期限(月)"
            placeholder="请输入使用期限"

            :rules="rules.SHIYQX"/>
        </div>


        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            v-model="dataInfo.PEIZRQ"
            label="配置日期"
            placeholder=""
            />
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            v-model="dataInfo.TUIYRQ"
            label="退役日期"
            placeholder=""
            />
        </div>

        <!--此处会跳转到选人界面-->
        <div class="cellTextStyleSingle rightCellStyle">
          <van-field
            @click="showDialogHandle(6)"
            readonly
            required
            v-model="dataInfo.BAOGRNAME"
            label="保管人"
            placeholder="请选择保管人"
            is-link
            :rules="rules.BAOGRNAME"/>
        </div>

        <div class="cellTextStyleSingle">
          <van-field
            required
            v-model="dataInfo.LINGYRDW"
            label="领用人所属单位"
            placeholder="请输入领用人所属单位"

            :rules="rules.LINGYRDW"/>
        </div>


        <div class="cellTextStyleSingle">
          <van-field
            required
            v-model="dataInfo.SBBS"
            label="设备标识"
            placeholder="请输入设备标识"

            :rules="rules.SBBS"/>
        </div>


        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            v-model="dataInfo.ERPBS"
            label="ERP编码"
            placeholder=""
            />
        </div>

        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            v-model="dataInfo.BATCH1"
            label="采购批次"
            placeholder="请输入采购批次"
            />
        </div>

        <div class="cellTextStyleSingle">
          <van-field
            :readonly="true"
            :disabled="true"
            v-model="dataInfo.ZHUANGT"
            label="状态"
            placeholder=""
            />
        </div>


        <div class="van-hairline--top vanHairlineTop"></div>

        <div class="remarkStyle">
          <div class="remarkUpTextStyle">
            <div class="imgStyle8"/>
            <div>&nbsp;&nbsp;&nbsp;备注</div>
          </div>
          <div class="remarkDownTextStyle">
            <van-field
              v-model="dataInfo.BEIZ"
              rows="2"
              autosize
              label=""
              type="textarea"
              placeholder="请输入备注"
            />
          </div>
        </div>
        <div class="btnBox">
          <van-button type="primary" color="#4eb3e9" size="large" @click="saveHandle">保存</van-button>
        </div>
      </van-cell-group>
    </van-form>
      <van-action-sheet v-model="showBaoPicker" cancel-text="取消" :actions="data.defaultData.BaogrDatas" @select="choosePeopleHandle"/>
      <van-action-sheet v-model="showUnitPicker" cancel-text="取消" :actions="data.defaultData.dictDatas"
                        @select="UnitonConfirm"/>
      <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="data.defaultData.dlDataList"
                        @select="onConfirm"/>
      <van-action-sheet v-model="smallPicker" cancel-text="取消" :actions="XLItem" @select="SubclassOnConfirm"/>
      <van-action-sheet v-model="showLyPicker" cancel-text="取消" :actions="data.defaultData.lyDataList"
                        @select="buildingOnConfirm"/>
      <van-action-sheet v-model="showLcPicker" cancel-text="取消" :actions="FcItem" @select="builLcOnConfirm"/>
      <van-action-sheet v-model="showFjPicker" cancel-text="取消" :actions="FjItem" @select="builFjOnConfirm"/>


    </basic-layout>
</template>
<script>
import {
  getLbByType,
  getLouyByUser,
  getLoucByLouy,
  getFangjByLouc,
  saveFuwsb,
  getFuwsbQuanxst, queryWin,
} from '@/api/srvAssurance/assetLabel/assetLabel'
  import peopleChoose from './serviceEquipmentPeopleChoose';
  import {queryDic} from "@/api/common";

  export default {
    name: 'serviceEquipmentEdit',
    components: {peopleChoose},

    // setup() {
    //   const searchVal = ref('');
    //   return {searchVal};
    // },

    data() {
      return {
        loading: false,
        showUnitPicker: false,
        showPicker: false,
        smallPicker: false,
        showLyPicker: false,
        showLcPicker: false,
        showFjPicker: false,
        showBaoPicker: false,
        formData: {
          id: "",
          louyxx: "",
          loucxx: "",
          fangjxx: "",
          baogr: "",
          sbdl: "",
          sbxl: "",
          swidbm: "",
          sbbs: "",
          gys: "",
          pinm: "",
          xingh: "",
          unit: "",
          danj: "",
          rukrq: "",
          shencrq: "",
          peizrq: "",
          tuiyrq: "",
          shiyqx: "",
          lingyrdw: "",
          beiz: "",
        },
        rules: {
          PINM: [
            {required: true, message: "", trigger: "onBlur"},
          ],
          XINGH: [
            {required: true, message: "", trigger: "onBlur"},
          ],
          UNIT: [
            {required: true, message: "", trigger: "onBlur"},
          ],
          DANJ: [
            {required: true, message: "", trigger: "onBlur"},
          ],
          SBDL: [
            {required: true, message: "", trigger: "onChange"},
          ],
          SBXL: [
            {required: true, message: "", trigger: "onChange"},
          ],
          FANGCNAME: [
            {required: true, message: "", trigger: "onChange"},
          ],
          LOUCNAME: [
            {required: true, message: "", trigger: "onChange"},
          ],
          FANGJNAME: [
            {required: true, message: "", trigger: "onChange"},
          ],
          SHIYQX: [
            {required: true, message: "", trigger: "onBlur"},
          ],
          BAOGRNAME: [
            {required: true, message: "", trigger: "onChange"},
          ],
          LINGYRDW: [
            {required: true, message: "", trigger: "onBlur"},
          ],
          SBBS: [
            {required: true, message: "", trigger: "onBlur"},
          ],

        },
        XLItem:[],
        FcItem:[],
        FjItem:[],
        dataInfo: {},
        showDialog: false,
        dialogTitle: "",
        searchVal: "",
        dialogData: [],
        dialogDataBack: [],
        data: {
          defaultData: {
            dlDataList: [], //大类数据
            xlDataList: [], //小类数据
            lyDataList: [], //楼宇数据
            lcDataList: [], //楼层数据
            fjDataList: [], //房间数据
            dictDatas: [], //单位字典数据
            BaogrDatas: [], //保管人
          },
          filterData: {
            dlDataList: [], //大类数据
            xlDataList: [], //小类数据
            lyDataList: [], //楼宇数据
            lcDataList: [], //楼层数据
            fjDataList: [], //房间数据
            dictDatas: [], //单位字典数据
            BaogrDatas: [], //保管人
          },
        },
        flag: null,
      }
    },

    mounted() {
      this.getDicts();
    },

    created() {
      if (this.$router.history.current.query.id) {
        this.initData(this.$router.history.current.query.id);
      }
      this.initLbType();
      this.initLyData();
    },

    methods: {
      // 获取所有字典
      getDicts: function () {
        // 获取单位字段
        queryDic('RA_WORK_UNIT_CODE').then((res) => {
          this.data.defaultData.dictDatas = []
          if (res.code === 1000 && res.data) {
            res.data.forEach(item => {
              var data = {}
              data.name = item.name
              data.dwId = item.value
              this.data.defaultData.dictDatas.push(data)
            })
          }
        })
      },

      choosePeopleHandle(val) {
        this.dataInfo.BAOGRNAME = val.NAME
        this.dataInfo.BAOGR =  val.value
        this.showBaoPicker = false
      },

      async initLbType() {
        let lbDatas = await getLbByType({type: "2"});
        if (lbDatas.status == 0) {
          var dataList = lbDatas.data;
          dataList.forEach(item => {
            if (item.parentCode == '') {
              this.data.defaultData.dlDataList.push(item);
            } else {
              this.data.defaultData.xlDataList.push(item);
            }
          });
        }
      },

      async initLyData() {
        let queryParam = {};
        queryParam.corpid = sessionStorage.getItem("corpId");
        let louYuDatas = await getLouyByUser(queryParam);
        if (louYuDatas.status == 0) {
          var dataList = louYuDatas.data;
          dataList.forEach(item => {
            item.name = item.fangcname;
            this.data.defaultData.lyDataList.push(item);
          });
        }
      },

      async initData(id) {
        let resData = await getFuwsbQuanxst({id: id});
        this.dataInfo = {};
        if (resData.status === 0) {
          this.dataInfo = resData.data;
        }
      },

      saveHandle() {
        this.$refs.form
          .validate()
          .then(async () => {
            this.dealData();
            this.loading = true;
            var res = await saveFuwsb(this.formData);
            this.loading = false;
            if (res.status === 0) {
              this.$toast.success('修改成功');
            }
          })
          .catch(() => {
            this.loading = false;
          });
      },

      dealData() {
        this.formData.id = this.dataInfo.ID;
        this.formData.louyxx = this.dataInfo.LOUYXX;
        this.formData.loucxx = this.dataInfo.LOUCXX;
        this.formData.fangjxx = this.dataInfo.FANGJXX;
        this.formData.baogr = this.dataInfo.BAOGR;
        this.formData.sbdl = this.dataInfo.SBDLID;
        this.formData.sbxl = this.dataInfo.SBXLID;
        this.formData.swidbm = this.dataInfo.SWIDBM;
        this.formData.sbbs = this.dataInfo.SBBS;
        this.formData.gys = this.dataInfo.GYS;
        this.formData.pinm = this.dataInfo.PINM;
        this.formData.xingh = this.dataInfo.XINGH;
        this.formData.unit = this.dataInfo.UNITID;
        this.formData.danj = this.dataInfo.DANJ;
        this.formData.rukrq = this.dataInfo.RUKRQ;
        this.formData.shencrq = this.dataInfo.SHENCRQ;
        this.formData.peizrq = this.dataInfo.PEIZRQ;
        this.formData.tuiyrq = this.dataInfo.TUIYRQ;
        this.formData.shiyqx = this.dataInfo.SHIYQX;
        this.formData.lingyrdw = this.dataInfo.LINGYRDW;
        this.formData.beiz = this.dataInfo.BEIZ;
      },
      UnitonConfirm (val) {
        this.dataInfo.UNIT = val.name
        this.dataInfo.UNITID = val.fangjid
        this.showUnitPicker = false
      },
      onConfirm (val) {
        this.dataInfo.SBDL = val.name
        this.dataInfo.SBDLID = val.code
        this.canteenCode = val.code
        this.dataInfo.SBXL=[];
        this.showPicker = false
      },
      SubclassOnConfirm (val) {
        this.dataInfo.SBXL = val.name
        this.dataInfo.SBXLID = val.code
        this.smallPicker = false
        this.XLItem = []
      },
      buildingOnConfirm (val) {
        this.dataInfo.FANGCNAME = val.name
        this.dataInfo.LOUYXX = val.fangcid
        this.showLyPicker = false
        this.dataInfo.LOUCNAME=[]
      },
      builLcOnConfirm (val) {
        this.dataInfo.LOUCNAME = val.name
        this.dataInfo.LOUCXX = val.loucid
        this.showLcPicker = false
        this.dataInfo.FANGJNAME=[]
        this.FcItem = []
      },
      builFjOnConfirm (val) {
        this.dataInfo.FANGJNAME = val.name
        this.dataInfo.FANGJXX = val.fangjid
        this.showFjPicker = false
        this.FjItem = []
      },
      async showDialogHandle(val) {
        this.dialogDataBack = [];
        if (val === 1) {
          this.showPicker=true
        } else if (val === 2) {
          if (!this.dataInfo.SBDLID) {
            this.$toast('请先选择大类');
            return;
          }
          this.XLItem = []
          // 处理小类数据
          let code = this.dataInfo.SBDLID;
          this.data.defaultData.xlDataList.forEach(item => {
            if (item.parentCode === code) {
              this.XLItem.push(item);
            }
          })
          this.smallPicker=true;
        } else if (val === 3) {
          this.showLyPicker=true
        } else if (val === 4) {
          if (!this.dataInfo.LOUYXX) {
            this.$toast('请先选择楼宇信息');
            return;
          }
          let lcData = await getLoucByLouy({louyid: this.dataInfo.LOUYXX});
          this.FcItem = []
          if (lcData.status == 0) {
            lcData.data.forEach(item => {
              var data = {}
              data.loucid = item.loucid
              data.name = item.loucname
              this.FcItem.push(data)
            })
          }
          this.showLcPicker = true
        } else if (val === 5) {
          if (!this.dataInfo.LOUYXX) {
            this.$toast('请先选择楼宇信息');
            return;
          } else if (!this.dataInfo.LOUCXX) {
            this.$toast('请先选择楼层信息');
            return;
          } else {
            this.dialogTitle = "请选择房间信息";
            let fjData = await getFangjByLouc({loucid: this.dataInfo.LOUCXX});
            this.FcItem = []
            if (fjData.status == 0) {
              fjData.data.forEach(item => {
                var data = {}
                data.fangjid = item.fangjid
                data.name = item.fangjname
                this.FjItem.push(data)
              })
            }
            this.showFjPicker = true
          }
        } else if (val == 99) {
          this.showUnitPicker = true
        }else if (val=6){
          this.data.defaultData.BaogrDatas = []
          let queryParam = {
            corpid: '',
            pageIndex: 1,
            pageSize: 20,
          }
          queryParam.corpid =  sessionStorage.getItem('corpId')
          let BaogrDatas = await queryWin(queryParam)
          var dataList = BaogrDatas.data
          dataList.forEach(item => {
            item.name = item.NAME
            item.value = item.staff_id
            this.data.defaultData.BaogrDatas.push(item)
          })

          this.showBaoPicker = true
        }
        this.showDialog = true;
        this.flag = val;
      },

      chooseHandle(item) {
        this.showDialog = false;
        if (this.flag === 1) {
          this.dataInfo.SBDL = item.name;
          this.dataInfo.SBDLID = item.code;

          this.dataInfo.SBXL = null;
          this.dataInfo.SBXLID = null;
        } else if (this.flag === 2) {
          this.dataInfo.SBXL = item.name;
          this.dataInfo.SBXLID = item.code;
        } else if (this.flag === 3) {
          this.dataInfo.FANGCNAME = item.name;
          this.dataInfo.LOUYXX = item.fangcid;

          this.dataInfo.LOUCNAME = null;
          this.dataInfo.LOUCXX = null;

          this.dataInfo.FANGJNAME = null;
          this.dataInfo.FANGJXX = null;
        } else if (this.flag === 4) {
          this.dataInfo.LOUCNAME = item.name;
          this.dataInfo.LOUCXX = item.loucid;

          this.dataInfo.FANGJNAME = null;
          this.dataInfo.FANGJXX = null;
        } else if (this.flag === 5) {
          this.dataInfo.FANGJNAME = item.name;
          this.dataInfo.FANGJXX = item.fangjid;
        } else if (this.flag === 99) {
          this.dataInfo.UNIT = item.name;
          this.dataInfo.UNITID = item.dwId;
        }
      },

      clearHandle() {
        this.showDialog = false;
        if (this.flag === 1) {
          this.dataInfo.SBDL = null;
          this.dataInfo.SBDLID = null;

          this.dataInfo.SBXL = null;
          this.dataInfo.SBXLID = null;
        } else if (this.flag === 2) {
          this.dataInfo.SBXL = null;
          this.dataInfo.SBXLID = null;
        } else if (this.flag === 3) {
          this.dataInfo.FANGCNAME = null;
          this.dataInfo.LOUYXX = null;

          this.dataInfo.LOUCNAME = null;
          this.dataInfo.LOUCXX = null;

          this.dataInfo.FANGJNAME = null;
          this.dataInfo.FANGJXX = null;
        } else if (this.flag === 4) {
          this.dataInfo.LOUCNAME = null;
          this.dataInfo.LOUCXX = null;

          this.dataInfo.FANGJNAME = null;
          this.dataInfo.FANGJXX = null;
        } else if (this.flag === 5) {
          this.dataInfo.FANGJNAME = null;
          this.dataInfo.FANGJXX = null;
        } else if (this.flag === 99) {
          this.dataInfo.UNIT = null;
          this.dataInfo.UNITID = null;
        }
      },

      onUpdate(value) {
        value = value.trim();
        this.dialogDataBack = [];
        let dialogData = [];
        if (this.flag === 1) {
          dialogData = this.data.defaultData.dlDataList;
        } else if (this.flag === 2) {
          dialogData = this.data.defaultData.xlDataList;
        } else if (this.flag === 3) {
          dialogData = this.data.defaultData.lyDataList;
        } else if (this.flag === 4) {
          dialogData = this.data.defaultData.lcDataList;
        } else if (this.flag === 5) {
          dialogData = this.data.defaultData.fjDataList;
        }
        if (value == null || value.trim() == "") {
          this.dialogDataBack = [...dialogData];
          return;
        }
        if (value) {
          dialogData.forEach(i => {
            let val = {...i};
            //判断遍历是否包含输入字符
            if (val.name.indexOf(value) != -1) {
              var newHtml = `<span style="color: red">${value}</span>`;
              //实现高亮效果
              this.dialogDataBack.push(val);
              //替换高亮字段
              this.dialogDataBack.forEach(item => {
                item.value = item.name;
                item.value = item.value.replace(value, newHtml);
              });
            }
          })
        }
      },

    }
  }
</script>

<style scoped lang="less">
.dataStyle {
  height: calc(100% - 38px);
  overflow: auto;
}
.btnBox {
  width: 100%;
  position: fixed;
  bottom: 0px;
  height: 40px;
  margin: 20px auto;
  // padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnBox /deep/ .van-button--large {
}

.van-button--large {
  height: 40px;
  line-height: 40px;
  width: 95%;
  margin: 10px auto;
}
.van-dialog {
  height: 70%;
}

.van-dialog__content {
  overflow-y: scroll;
  height: 90%;
}
.dialogDataStyle{
  text-align: center;
}

</style>
